<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">

      <el-form-item>
        <el-date-picker
          v-model="entryDate"
          clearable
          value-format="yyyy-MM-dd HH:mm"
          type="datetimerange"
          placeholder="选择日期"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 360px;"
          @change="handleDateChange"
        />
      </el-form-item>

      <el-form-item style="margin-left: 28px;">
        <el-input v-model="queryParams.operName" placeholder="请输入使用人" />
      </el-form-item>
      <el-form-item style="margin-left: 28px;">
        <el-input v-model="queryParams.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="clear">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮 -->
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="dialogVisible = true">批量删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
        >导出</el-button>
      </el-col>
    </el-row> -->

    <!-- 表格 -->
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column prop="operTime" label="时间" align="center" />
      <el-table-column prop="remark" label="备注" align="center" />
      <el-table-column prop="operName" label="使用人" align="center" />
      <el-table-column prop="roles" label="权限" align="center" />
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">允许</span>
          <span v-if="scope.row.status == 1">不允许</span>
        </template>
      </el-table-column>
    </el-table>

    <!--分页工具条-->
    <el-pagination
      :background="background"
      :current-page="current"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { page } from '@/api/log.js'
import { parseTime } from '@/utils'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      background: true,
      // 每页显示的条数
      pageSize: 10,
      // 总记录数
      totalCount: 100,
      // 当前页码
      current: 1,
      // 添加数据对话框是否展示的标记
      dialogVisible: false,
      queryParams: {
        status: '',
        startTime: '', // 添加开始时间字段
        endTime: '' // 添加结束时间字段
      },
      entryDate: [], // 用于v-model绑定日期选择器的值
      value: {
      },
      schoolyear: {
      },
      startTime: '',
      endTime: '',
      // 被选中的id数组
      selectedIds: [],
      // 复选框选中数据集合
      multipleSelection: [],
      // 表格数据
      tableData: [],
      list: null,
      total: 0
    }
  },
  computed: {
    ...mapState(['name'])
  },

  mounted() {
    this.page() // 当页面加载完成后，发送异步请求，获取数据
  },

  methods: {
    // 查询分页数据
    page() {
      const requestData = {
        operName: this.queryParams.operName,
        remark: this.queryParams.remark,
        startTime: this.queryParams.startTime,
        roles: this.queryParams.roles,
        endTime: this.queryParams.endTime,
        current: this.current,
        pageSize: this.pageSize
      }

      page(requestData).then((res) => {
        this.totalCount = res.data.total
        this.tableData = res.data.records
      }).catch((error) => {
        // 处理错误情况
        console.error('Error fetching data:', error)
      })
    },

    handleDateChange(val) {
      if (val) {
        this.queryParams.startTime = val[0] // 开始时间
        this.queryParams.endTime = val[1] // 结束时间
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
    },
    // 复选框选中后执行的方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 查询方法
    onSubmit() {
      this.current = 1
      this.page()
    },
    // 重置方法
    clear() {
      this.queryParams = { operName: '', remark: '' }
      this.entryDate = []
      this.page()
    },

    // 分页
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val
      this.page()
    },

    handleCurrentChange(val) {
      // 重新设置当前页码
      this.current = val
      this.page()
    },

    ...mapMutations('schoolmanage', ['getname']),
    formatJson(filterVal) {
      return this.list.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>
